<template>
  <view>
		<block v-if="entities.length">
			<view class="inforamtion" style="display: flex;" v-for="(item, index) in entities" :key="index">
				<view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">业务编码</view>
						<view class="rl">{{ item.ywfl }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">名称</view>
						<view class="rl">{{ item.ywmc }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">合同占比(%)</view>
						<view class="rl">{{ item.htzb }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">分配合同额（元）</view>
						<view class="rl">{{ item.fphte }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">切割合同额（元）</view>
						<view class="rl">{{ item.cutContractAmount }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">生产团队</view>
						<view class="rl">{{ item.sctd_dictText }}</view>
					</view>
					<!-- <view class="option" style="width: 520rpx;">
						<view class="lf">生产公司</view>
						<view class="rl">{{ item.productCompanyId ? filterMultiDictText(dictOptions['gsda'], item.productCompanyId + '') : '' }}</view>
					</view> -->
					<view class="option" style="width: 520rpx;">
						<view class="lf">团队负责人</view>
						<view class="rl">{{ item.tdfzr_dictText }}</view>
					</view>
				</view>
				<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;" v-if="!newDisabled">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="handleEdit(item, index)"></u-icon>
				</view>
			</view>
		</block>
    <u-empty v-else mode="data" text="暂无相关数据" icon="/static/empty/data.png"></u-empty>
    <u-popup :show="popupVisible">
      <u-form
        labelPosition="top"
        class="px-1 pb-2"
        ref="form"
        labelWidth="auto"
        :labelStyle="{
        	fontSize: '14px',
        	color: '#B2B2B2',
        	lineHight: '20px'
        }"
        :modle="editItem"
        :rules="rules"
      >
        <view class="basic-style">
          <u-form-item label="业务编码">
            <u--input disabled :value="editItem.ywfl" />
          </u-form-item>
          <u-form-item label="名称">
            <u--input disabled :value="editItem.ywmc" />
          </u-form-item>
          <u-form-item label="合同占比(%)">
            <u--input type="number" v-number-normal :disabled="(editItem.distributionType == 'cancel' && editItem.shouldPayFlag == '1') ? true : distributionMethod==2" v-model="editItem.htzb" @blur="htzbChange" />
          </u-form-item>
          <u-form-item label="分配合同额(元)">
            <u--input type="number" v-number-normal :disabled="(editItem.distributionType == 'cancel' && editItem.shouldPayFlag == '1') ? true : distributionMethod==1" v-model="editItem.fphte" @blur="fphteChange" />
          </u-form-item>
          <u-form-item label="切割合同额(元)">
            <u--input type="number" v-number-normal  v-model="editItem.cutContractAmount" />
          </u-form-item>
          <u-form-item label="生产团队">
            <u--input disabled :value="editItem.sctd_dictText" />
          </u-form-item>
          <!-- <u-form-item label="生产公司">
            <u--input disabled :value="editItem.productCompanyId" />
          </u-form-item> -->
          <u-form-item label="团队负责人">
            <u--input disabled :value="editItem.tdfzr_dictText" />
          </u-form-item>
        </view>
        <view class="task-action">
          <u-button type="warning" size="small" @click="handleCancel">取消</u-button>
          <u-button type="primary" size="small" @click="handleConfirm">更新</u-button>
        </view>
      </u-form>
    </u-popup>
  </view>
</template>

<script>
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'

export default {
  name: 'contractTaskInfo',
  props: {
    entities: {
      type: Array,
      default: () => [],
    },
		bchte: {
			type: [String, Number],
			default: '',
		},
		newDisabled: {
			type: Boolean,
			default: false,
		},
		distributionMethod: {
			type: String,
			default: '',
		}
  },
  data() {
    return {
      popupVisible: false,
      filterMultiDictText,
			initDictOptions,
      index: null,
      rules: [],
      dictOptions: {},
      editItem: {},
      backItem: {},
    }
  },
  created() {
    this.initDictConfig()
  },
  methods: {

    async initDictConfig() {
      initDictOptions('erp_company_files,file_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'gsda', res.result)
        }
      })
      },
    handleEdit(item, index) {
      this.popupVisible = true
      this.index = index
      this.backItem = { ...item }
      this.editItem = item
      
    },
    handleCancel() {
      this.editItem = { ...this.backItem }
      this.entities[this.index] = { ...this.backItem }
      this.popupVisible = false
    },
    handleConfirm() {
      this.popupVisible = false
    },
	htzbChange (value) {
		if (!this.bchte) return false
		let amount = this.bchte * this.editItem.htzb / 100
		this.editItem.fphte = Math.round((amount + Number.EPSILON) * 100) / 100;
	},
	
	fphteChange (value) {
		if (!this.bchte) return false
		let rate = this.editItem.fphte / this.bchte * 100
		this.editItem.htzb = Math.round((rate + Number.EPSILON) * 100) / 100;
	}
  },
}
</script>

<style scoped lang="scss">
.inforamtion{
	margin-top: 10rpx;
	padding: 10rpx;
	border-radius: 15rpx;
	box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
}
.task-action {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rpx;
}
</style>
